<script>
export default {
  name: 'SceneProjectDetail',
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {},
      loading: false,
      formList: [
        { name: '项目名称：', prop: 'projectName' },
        { name: '项目地点：', prop: 'address' },
        { name: '交付时间：', prop: 'deliverTime' },
        { name: '项目总用地面积（m²）：', prop: 'landArea' },
        { name: '总建筑面积（m²）：', prop: 'floorArea' },
        { name: '绿地面积（m²）：', prop: 'greenArea' },
        { name: '项目负责人：', prop: 'userName' },
        { name: '联系方式：', prop: 'mobilePhone' },
        { name: '项目状态：', prop: 'statusName' },
        {  },
        { name: '项目介绍：', prop: 'proRemark' },
        {  },
        { name: '项目图片：',prop: 'imageList', itemClass: 'image-field'},
        { name: '背景图：',prop: 'backgroundImg', itemClass: 'image-field'}
      ]
    }
  },
  watch: {
    popData: {
      handler(data) {
        if (data) {
          this.getDetailData({ id: data.id })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 获取详情数据
     */
    getDetailData(id) {
      this.loading = true
      this.$api.sceneProject
        .detail(id)
        .then((res) => {
          if (Number(res.code) === 1000) {
            this.formList.forEach((e) => {
              if(e.prop) {
              this.$set(this.formData, e.prop, res.data[e.prop])
              }
            })
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<template>
  <div class="project-detail-box">
    <el-form ref="form" v-loading="loading" :model="formData">
      <template v-for="(item, index) in formList">
        <el-form-item
          :key="`${item.prop}${index}`"
          :label="item.name"
          :prop="item.prop"
          :class="item.itemClass"
          :style="item.itemStyle || {}"
        >
          <span v-if="item.prop !== 'proRemark' && item.prop !== 'imageList' && item.prop !== 'backgroundImg'">{{ formData[item.prop] }}</span>
          <span v-else-if="item.prop === 'proRemark'" v-html="formData.proRemark"></span>
          <span v-else-if="item.prop === 'imageList'">
            <el-image v-for="img in formData.imageList" :key="img" :src="img" class="img-item"></el-image>
          </span>
          <span v-else-if="item.prop === 'backgroundImg'">
            <el-image :src="formData.backgroundImg" class="img-item"></el-image>
          </span>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.project-detail-box {
  color: #333;
  padding: 0 20px;

  .image-field {
    width: 100% !important;
  }

  .img-item {
    width: 140px;
    height: 140px;
    cursor: pointer;
    margin: 0 10px 6px 0;
  }
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
      width: 50%;
      margin: 0;
      padding: 6px 0 6px 10px;

      .el-form-item__label {
        color: #666;
        padding-right: 5px;
      }

      .el-form-item__content {
        padding: 0;
        margin-left: 75px;
      }

      &.form-sub-title {
        width: 100%;
        padding-left: 0;
        margin-bottom: 20px;

        &.pt20 {
          padding-top: 20px;
        }
      }

      &.width100p {
        width: 100%;
      }
    }
  }
}
</style>
